import { reactive, ref } from "vue";
import Comment from "./comment";
import { socket, myName } from "./linkSocket";
import stoneArr from "./stone";
import { bombArr2 } from "./bomb";
import { stageArr } from "./stage";
let downKey = reactive({
  ArrowDown: 0,
  ArrowUp: 0,
  ArrowLeft: 0,
  ArrowRight: 0
});
let allowKey = reactive({
  allowRight: true,
  allowLeft: true,
  allowUp: true,
  allowDown: true
});
let time1 = null;
let limitArr = [];
let rSpeed = ref(Comment.moveSpeed); //人物速度
export let rescue = ref(false); //救援状态
// 键盘事件
export function downKeyMove(val) {
  // 当前角色
  let oRole = document.querySelector(`.${val}`);
  // 角色指针
  let oPointer = document.querySelector(`.pointer-${myName}`);
  //确定方块移动的右边界和下边界
  //边界值为文档的可视宽,高减去小方块的实际宽,高
  let maxLeft = Comment.mapSize.width - oRole.offsetWidth;
  let maxTop = Comment.mapSize.height - oRole.offsetHeight;
  let _top = +oRole.style.top.replace("px", "");
  let _left = +oRole.style.left.replace("px", "");
  time1 = setInterval(() => {
    if (downKey.ArrowDown) {
      if (_top >= maxTop) {
        oRole.style.top = maxTop + "px";
        sendMessage("move", { direction: 1, distance: 0 });
      } else {
        limit(_left, _top);
        if (allowKey.allowDown) {
          _top += rSpeed.value;
          oRole.style.top = _top + "px";
          sendMessage("move", { direction: 1, distance: rSpeed.value });
          oPointer.style.top = _top - 25 + "px"; // 加减  根据创建指针那里来判断
        } else {
          sendMessage("move", { direction: 1, distance: 0 });
        }
        oRole.style.top = _top + "px";
      }
    }
    if (downKey.ArrowUp) {
      if (_top <= 0) {
        oRole.style.top = 0 + "px";
        sendMessage("move", { direction: 0, distance: 0 });
      } else {
        limit(_left, _top);
        if (allowKey.allowUp) {
          _top -= rSpeed.value;
          oPointer.style.top = _top - 25 + "px"; // 加减  根据创建指针那里来判断
          sendMessage("move", { direction: 0, distance: rSpeed.value });
        } else {
          sendMessage("move", { direction: 0, distance: 0 });
        }
        oRole.style.top = _top + "px";
      }
    }
    if (downKey.ArrowLeft) {
      if (_left <= 0) {
        oRole.style.left = "0px";
        sendMessage("move", { direction: 2, distance: 0 });
      } else {
        limit(_left, _top);
        if (allowKey.allowLeft) {
          _left -= rSpeed.value;
          oPointer.style.left = _left + 10 + "px"; // 加减 根据创建指针那里来判断
          sendMessage("move", { direction: 2, distance: rSpeed.value });
        } else {
          sendMessage("move", { direction: 2, distance: 0 });
        }
        oRole.style.left = _left + "px";
      }
    }
    if (downKey.ArrowRight) {
      if (_left >= maxLeft) {
        oRole.style.left = maxLeft;
        sendMessage("move", { direction: 3, distance: 0 });
      } else {
        limit(_left, _top);
        if (allowKey.allowRight) {
          _left += rSpeed.value;
          sendMessage("move", { direction: 3, distance: rSpeed.value });
          oPointer.style.left = _left + 10 + "px"; // 加减  根据创建指针那里来判断
        } else {
          sendMessage("move", { direction: 3, distance: 0 });
        }
        oRole.style.left = _left + "px";
      }
    }
  }, 30);
  //当有按键按下时触发此事件
  document.onkeydown = function(e) {
    //解决获取键值时浏览器不兼容问题
    let ev = event || e;
    // let keyCode = ev.keyCode || ev.which;
    // let pObj = document.createElement("img");
    downKey[ev.code] = 1;
  };
  document.onkeyup = e => {
    downKey[e.code] = 0;
    // 放炸弹请求
    if (e.code == "Space") {
      socket.send("{messageType:" + 10 + "}");
    }
  };
}
// 刷新 离开页面
window.onbeforeunload = function() {
  clearInterval(time1);
};
function sendMessage(type, action) {
  if (type == "move") {
    // 移动  direction方向  上0  下1  左2  右3
    socket.send(
      "{messageType:" +
        2 +
        ",sequenceId:" +
        1 +
        ",direction:" +
        action.direction +
        ",distance:" +
        action.distance +
        "}"
    );
  }
}
function limit(x, y) {
  limitArr = [...stoneArr["shu"], ...stoneArr["xz"], ...bombArr2];
  allowKey.allowRight = rescue.value
    ? !rescue.value
    : !limitArr.some(item => {
        // 右 看限制（有没有碰到障碍物）数组里面 有满足一下条件 就不给它移动
        return (
          item[0] - x <= Comment.limitWidth &&
          item[0] - x >= Comment.limitWidth - rSpeed.value &&
          Math.abs(y - item[1]) <= Comment.limitHeight
        );
      });
  allowKey.allowLeft = rescue.value
    ? !rescue.value
    : !limitArr.some(item => {
        // 左
        return (
          x - item[0] <= Comment.limitWidth &&
          x - item[0] >= Comment.limitWidth - rSpeed.value &&
          Math.abs(y - item[1]) <= Comment.limitHeight
        );
      });
  allowKey.allowUp = rescue.value
    ? !rescue.value
    : !limitArr.some(item => {
        // 上
        return (
          Math.abs(x - item[0]) <= Comment.limitWidth &&
          y - item[1] <= Comment.limitHeight &&
          y - item[1] >= Comment.limitHeight - rSpeed.value
        );
      });
  allowKey.allowDown = rescue.value
    ? !rescue.value
    : !limitArr.some(item => {
        // 下
        return (
          Math.abs(x - item[0]) <= Comment.limitWidth &&
          item[1] - y <= Comment.limitHeight &&
          item[1] - y >= Comment.limitHeight - rSpeed.value
        );
      });
  stageArr.value.map(item => {
    // 右
    let R =
      item[0] - x <= Comment.limitWidth &&
      item[0] - x >= Comment.limitWidth - rSpeed.value &&
      Math.abs(y - item[1]) <= Comment.limitHeight;
    // 左
    let L =
      x - item[0] <= Comment.limitWidth &&
      x - item[0] >= Comment.limitWidth - rSpeed.value &&
      Math.abs(y - item[1]) <= Comment.limitHeight;
    // 上
    let T =
      Math.abs(x - item[0]) <= Comment.limitWidth &&
      y - item[1] <= Comment.limitHeight &&
      y - item[1] >= Comment.limitHeight - rSpeed.value;
    //下
    let B =
      Math.abs(x - item[0]) <= Comment.limitWidth &&
      item[1] - y <= Comment.limitHeight &&
      item[1] - y >= Comment.limitHeight - rSpeed.value;
    if (R || L || T || B) {
      switch (item[2]) {
        case 4:
          console.log("鞋子加速");
          rSpeed.value += 1;
          break;
        case 5:
          console.log("炸弹数量");

          break;
        case 6:
          console.log("炸弹威力");

          break;
      }
      socket.send(
        "{messageType:" +
          20 +
          ",propType:" +
          item[2] +
          ",cellNo:" +
          item[3] +
          "}"
      );
      console.log(
        "{messageType:" +
          20 +
          ",propType:" +
          item[2] +
          ",cellNo:" +
          item[3] +
          "}"
      );
    }
  });
}
